<template>
    <n-space vertical class="layout-content-view">
        <n-card>
            <SearchForm @finish="doQuery" />
        </n-card>
        <n-card>
            <GetanTable @register="register" />
        </n-card>
        <EditForm ref="editFormRef" @after="methods.loadData" />
    </n-space>
</template>

<script setup lang="ts">
import SearchForm from "./components/search/Index.vue"
import EditForm from "./components/edit/Index.vue"
import { GetanTable, GetanTableFilterType, GetanTableProps, useGetanTable } from "@/components/Table/BasicTable"
import { api } from "./api"
import { NSwitch, NTag } from "naive-ui"
import { isNullOrUnDef } from "@/utils"

function isSystemRole(rowData: Recordable) {
    return rowData.sys === true
}

function isEnableRole(rowData: Recordable) {
    return rowData.status === "0"
}

const options: GetanTableProps = {
    columns: [
        { title: "ID", property: "id", show: false },
        { title: "员工编码", property: "username", width: "100px" },
        { title: "员工名称", property: "nickname", width: "150px" },
        {
            title: "性别",
            property: "gender",
            width: "80px",
            render: (rowData: Recordable) => {
                const { gender } = rowData
                if (gender === "1") {
                    return "男"
                } else if (gender === "2") {
                    return "女"
                } else {
                    return "未知"
                }
            }
        },
        { title: "手机号", property: "mobile", width: "120px" },
        {
            title: "状态",
            property: "status",
            width: "100px",
            render: (rowData: Recordable) => {
                if (isSystemRole(rowData)) {
                    if (isEnableRole(rowData)) {
                        return h(NTag, { type: "success", round: true }, { default: () => "正常" })
                    } else {
                        return h(NTag, { type: "error", round: true }, { default: () => "停用" })
                    }
                } else {
                    return h(NSwitch, { value: isEnableRole(rowData), "onUpdate:value": (value: boolean) => changeStatus(rowData, value) })
                }
            }
        },
        { title: "备注", property: "remark" }
    ],
    usePagination: true,
    // useFlexHeight: true,
    request: api.search,
    leftActions: {
        size: "small",
        items: [{ title: "新增", type: "primary", icon: "PlusOutlined", onClick: () => handleAdd() }]
    },
    rowActions: {
        width: "120px",
        actions: [
            { title: "修改", type: "primary", disabled: isSystemRole, onClick: (rowData: Recordable) => handleUpdate(rowData) },
            { title: "删除", type: "error", disabled: isSystemRole, onClick: (rowData: Recordable) => handleDelete(rowData) }
        ]
    }
}

const { register, methods } = useGetanTable(options)

const doQuery = (formData: Recordable) => {
    const conditions = Object.keys(formData)
        .map(k => {
            const v = formData[k]
            if (!isNullOrUnDef(v)) {
                return { property: k, mode: "LIKE", values: [v] } as GetanTableFilterType
            } else {
                return undefined
            }
        })
        .filter(v => v !== undefined)
    methods.setFilterConditions(conditions as GetanTableFilterType[])
    methods.loadData()
}

async function changeStatus(rowData: Recordable, value: boolean) {
    if (value === true) {
        const { isOk } = await api.enable({ ids: [rowData.id] })
        if (isOk()) {
            rowData.status = value ? "0" : "1"
        }
    } else {
        const { isOk } = await api.disable({ ids: [rowData.id] })
        if (isOk()) {
            rowData.status = value ? "0" : "1"
        }
    }
}

async function handleDelete(rowData: Recordable) {
    const { isOk } = await api.delete({ ids: [rowData.id] })
    if (isOk()) {
        methods.loadData()
    }
}

const editFormRef = ref()
function handleAdd() {
    editFormRef.value.openAddForm()
}
function handleUpdate(rowData: Recordable) {
    editFormRef.value.openUpdateForm(rowData)
}
</script>
